<template>
  <div>
    <router-view :key="$route.fullPath" />
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  created () {
  }
}
</script>
<style lang="less">
.view {
  height: 100%;
}
</style>
<style  type="text/css" lang="less" scoped>
.route-backwrad, .route-fowrad {
  &-enter-active, &-leave-active {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .3s ease;
    will-change: transform;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
  }
}

.route-backwrad {
  &-enter {
    transform: translate3d(-20%, 0, 0);
  }

  &-leave-active {
    z-index: 12;
    // 此处Z轴需要给定一个值，用于修复iOS 3d切换导致z-index无效issue
    transform: translate3d(100%, 0, 20px);
  }
}

.route-fowrad {
  &-enter {
    z-index: 10;
    transform: translate3d(100%, 0, 0);
  }

  &-leave-active {
    transform: translate3d(-20%, 0, 0);
  }
}
</style>
